<template>
	<div class="main app-container">
		<div class="content">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" /> 项目基本信息
				<span style="float: right; margin-top: -5px">
					<!-- <el-button type="primary" @click="toCheckLogs">查看采购审核日志</el-button> -->
					<!-- <el-button v-if="detail.quotationStatus == '1' && userStore.$state.roles.includes('yw1')" type="primary" @click="toCheck()"
						><el-icon style="margin-right: 5px"><Check /></el-icon>审核</el-button
					> -->
					<el-button v-if="userStore.$state.roles.includes('sj1')" type="primary" @click="toEdit()"
						><el-icon style="margin-right: 5px"><Edit /></el-icon>修改</el-button
					>
					<el-button v-if="userStore.$state.roles.includes('sj1')" type="primary" @click="deleteRow()"
						><el-icon style="margin-right: 5px"><Delete /></el-icon>删除</el-button
					>
				</span>
			</div>
			<el-divider style="margin: 15px 0" />
			<div class="info">
				<div class="item">
					<span class="label">报价单编号</span>
					<span>{{ detail.quotationCode }}</span>
				</div>
				<div class="item">
					<span class="label">报价员</span>
					<span>{{ detail.createUserCode }}</span>
				</div>
				<!-- <div class="item">
					<span class="label">状态</span>
					{{ detail.quotationStatus == 1 ? '待审核' : detail.quotationStatus == 2 ? '审核通过' : '审核不通过' }}
				</div> -->
				<div class="item">
					<span class="label">创建时间</span>
					<span>{{ detail.createTime }}</span>
				</div>
				<div class="item">
					<span class="label">更新时间</span>
					<span>{{ detail.updateTime }}</span>
				</div>
				<div class="item">
					<span class="label">项目编号</span>
					<span>{{ detail.projectCode }}</span>
				</div>
				<div class="item">
					<span class="label">项目名称</span>
					<span>{{ detail.projectName }}</span>
				</div>
				<div class="item">
					<span class="label">项目地址</span>
					<span>{{ detail.projectAdress }}</span>
				</div>
				<div class="item">
					<span class="label">客户名称</span>
					<span>{{ detail.customerName }}</span>
				</div>
				<div class="item">
					<span class="label">报价名称</span>
					<span>{{ detail.quotationName }}</span>
				</div>
				<div class="item">
					<span class="label">联系人</span>
					<span>{{ detail.projectContacts }}</span>
				</div>
				<div class="item">
					<span class="label">手机号</span>
					<span>{{ detail.projectMobile }}</span>
				</div>
			</div>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">附件</div>
			<el-divider style="margin: 15px 0" />
			<div class="info-url" @click="downloadFile(detail.quotationFile)">
				<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ detail.quotationFile }}
			</div>
			<br />
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">
				<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />报价详情
				<el-button v-if="userStore.$state.roles.includes('sj1')" type="primary" style="float: right; margin-top: -5px" @click="openDetail()"
					><el-icon style="margin-right: 5px"><Plus /></el-icon>添加报价</el-button
				>
				<el-button style="float: right; margin-top: -5px; margin-right: 5px" type="primary" @click="expotData">导出</el-button>
			</div>
			<el-divider style="margin: 15px 0" />
			<div style="margin-left: 20px">报价金额：{{ moneyQuote }}元</div>
			<div style="margin-left: 20px; font-weight: 600">成本金额：{{ moneyCost }}元</div>
			<div style="margin-left: 20px; font-weight: 600">执行成本：{{ chenben }}元</div>
			<div style="display: flex">
				<div v-for="item in prices" class="price-item" :key="item.itemId" @click="editPrice(item)">
					<el-image style="width: 60px; height: 60px" :src="qt" fit="fill" />
					<div style="font-size: 18px">{{ getLabel(item.categoryId, dataList) }}</div>
					<div class="price-label">合同价格</div>
					<div class="price-p">{{ item.moneyQuote }}元</div>
					<div class="price-label">预算成本</div>
					<div class="price-p">{{ item.moneyCost }}元</div>
					<div class="price-label">合同内成本</div>
					<div class="price-p">{{ item.projectProcureItemCountVo.treatyCount ? item.projectProcureItemCountVo.treatyCount : 0 }}元</div>
					<div class="price-label">有签证成本</div>
					<div class="price-p">{{ item.projectProcureItemCountVo.visaCount ? item.projectProcureItemCountVo.visaCount : 0 }}元</div>
					<div class="price-label">无签证成本</div>
					<div class="price-p">{{ item.projectProcureItemCountVo.noVisaCount ? item.projectProcureItemCountVo.noVisaCount : 0 }}元</div>
				</div>
			</div>
		</div>
		<el-divider style="margin: 15px 0" />
		<div class="content">
			<div class="content-header">评价反馈</div>
			<el-divider style="margin: 15px 0" />
			<el-input
				:disabled="!userStore.$state.roles.includes('yw1')"
				v-model="detail.recommend"
				:rows="5"
				type="textarea"
				placeholder="请输入评价反馈" />
		</div>
		<!-- 添加报价单 -->
		<el-dialog title="报价信息" v-model="open" width="600px" append-to-body destroy-on-close>
			<el-form ref="baseform" :model="form1" :rules="rules1" label-width="80px">
				<el-form-item prop="itemName" label="报价名称">
					<el-select
						:disabled="!userStore.$state.roles.includes('sj1')"
						v-model="form1.categoryId"
						style="width: 240px"
						placeholder="请选择分类"
						size="default"
						clearable>
						<el-option v-for="dict in dataList" :key="dict.id" :label="dict.label" :value="dict.id" />
					</el-select>
					<!-- <el-input v-model="form1.itemName" style="width: 240px" :disabled="!userStore.$state.roles.includes('sj1')" placeholder="请输入报价名称" /> -->
				</el-form-item>
				<el-form-item prop="moneyCost" label="成本价">
					<el-input-number
						:controls="false"
						style="width: 240px"
						:disabled="!userStore.$state.roles.includes('sj1')"
						:precision="2"
						:step="0.01"
						:min="0"
						v-model="form1.moneyCost"
						placeholder="请输入成本价" />
				</el-form-item>
				<el-form-item prop="moneyQuote" label="报价">
					<el-input-number
						:controls="false"
						:disabled="!userStore.$state.roles.includes('sj1')"
						style="width: 240px"
						:precision="2"
						:step="0.01"
						:min="0"
						v-model="form1.moneyQuote"
						placeholder="请输入报价" />
				</el-form-item>
				<el-form-item label="附件上传">
					<el-upload
						v-model:file-list="filelist"
						:action="fileUrl"
						:disabled="!userStore.$state.roles.includes('sj1')"
						multiple
						ref="upload"
						:headers="token"
						name="files"
						:on-success="handleSuccess"
						:on-remove="handleRemove"
						style="width: 340px">
						<el-button type="primary">上传</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<el-form-item v-if="dowloadList.length != '0'" label="附件下载">
				<div class="info-url" v-for="(item, index) in dowloadList" :key="index" @click="downloadFile(item)">
					<el-icon style="position: relative; top: 3px"><Link /></el-icon>&nbsp;{{ item }}
				</div>
			</el-form-item>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" v-if="userStore.$state.roles.includes('sj1')" @click="submitForm">确 定</el-button>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 审核 -->
		<!-- <el-dialog :title="`报价单审核`" v-model="openC" width="800px" append-to-body :close-on-click-modal="false">
			<el-form ref="baseformc" :model="form" label-position="right" :rules="rules" label-width="120px">
				<el-form-item prop="quotationStatus" label="审核">
					<el-radio-group v-model="form.quotationStatus">
						<el-radio label="2">审核通过</el-radio>
						<el-radio label="3">审核不通过</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item prop="auditNote" label="审核备注">
					<el-input v-model="form.auditNote" :rows="5" type="textarea" style="margin-bottom: 5px" placeholder="审核备注" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<div style="text-align: right">
					<el-button type="primary" @click="submitAdd">确 定</el-button>
					<el-button @click="ccel">取 消</el-button>
				</div>
			</div>
		</el-dialog> -->
		<div style="line-height: 80px; height: 80px; text-align: center">
			<el-button v-if="userStore.$state.roles.includes('yw1')" type="primary" @click="submitDec">保存</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
	</div>
</template>
<script setup>
import qt from '@/assets/price/qt.png'
import { useRoute } from 'vue-router'
import { listOne } from '@/api/product/product'
import { getToken } from '@/utils/auth'
import { getLabel } from '@/utils/getLabel'
import { updateQuotation, getQuotation, delQuotation, addQuotationItem, updateQuotationItem, getQuotationItems } from '@/api/price/price'
import { download } from '@/utils/request'
import { computed, reactive, ref } from 'vue'
import useTagsViewStore from '@/store/modules/tagsView'
import { getConfigKey } from '@/api/system/config'
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const { proxy } = getCurrentInstance()

const fileUrl = ref('')
const imgUrl = ref('')
const pre = ref('')

getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})
const prices = ref([])
const moneyQuote = computed(() => {
	let i = 0
	for (let item of prices.value) {
		i += Number(item.moneyQuote)
	}
	return i
})
const moneyCost = computed(() => {
	let i = 0
	for (let item of prices.value) {
		i += Number(item.moneyCost)
	}
	return i
})
const chenben = computed(() => {
	let i = 0
	for (let item of prices.value) {
		if (item.projectProcureItemCountVo) {
			if (item.projectProcureItemCountVo.treatyCount) i += Number(item.projectProcureItemCountVo.treatyCount)
			if (item.projectProcureItemCountVo.visaCount) i += Number(item.projectProcureItemCountVo.visaCount)
			if (item.projectProcureItemCountVo.noVisaCount) i += Number(item.projectProcureItemCountVo.noVisaCount)
		}
	}
	return i
})
const token = { Authorization: 'Bearer ' + getToken() }
const dowloadList = ref([])
const tagsView = useTagsViewStore()
const route = useRoute()
const form = reactive({
	quotationId: route.query.id,
	quotationStatus: '',
	auditNote: ''
})
const rules = {
	quotationStatus: [{ required: true, message: '审核状态不能为空', trigger: 'blur' }]
}
const router = useRouter()
const detail = ref({})

if (route.query.id) {
	getQuotation(route.query.id).then((res) => {
		detail.value = res.data
		for (let item in form) {
			form[item] = res.data[item]
		}
		form1.quotationId = res.data.quotationId
	})
}
const getList = () => {
	getQuotationItems({ quotationId: route.query.id }).then((res) => {
		prices.value = res.data
	})
}
getList()
const dataList = ref([])
listOne().then((response) => {
	dataList.value = response.data.map((e) => {
		return { label: e.categoryName, id: e.categoryId, orderNum: e.categorySort, createTime: e.createTime, hasChildren: true, value: e.categoryId }
	})
})
const open = ref(false)
/** 取消按钮 */
function cancel() {
	open.value = false
}
const openDetail = () => {
	form1.itemId = undefined
	form1.itemName = undefined
	form1.moneyCost = 0
	form1.moneyQuote = 0
	form1.fileAddressList = []
	filelist.value = []
	dowloadList.value = []
	form1.quotationId = detail.value.quotationId
	open.value = true
}
const form1 = reactive({
	itemId: undefined,
	quotationId: undefined,
	itemName: undefined,
	categoryId: undefined,
	moneyCost: 0,
	moneyQuote: 0,
	fileAddressList: []
})
const rules1 = {
	categoryId: [{ required: true, message: '报价名称不能为空', trigger: 'blur' }],
	moneyCost: [{ required: true, message: '成本价不能为空', trigger: 'blur' }],
	moneyQuote: [{ required: true, message: '报价不能为空', trigger: 'blur' }]
}
const filelist = ref([])
const handleSuccess = () => {
	form1.fileAddressList = filelist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const handleRemove = () => {
	form1.fileAddressList = filelist.value.map((e) => {
		if (e) {
			return e.response ? e.response.data[0] : e.url
		}
	})
}
const expotData = () => {
	proxy.download('/function/quotation/export/detail', { projectId: detail.value.projectId }, `报价单清单_${new Date().getTime()}.xlsx`)
}
const openC = ref(false)
const toCheck = () => {
	openC.value = true
}
const ccel = () => {
	openC.value = false
}
const toEdit = () => {
	router.push({
		path: '/price/priceEdit',
		query: { id: detail.value.quotationId }
	})
}
const editPrice = (row) => {
	//if (detail.value.quotationStatus == '2') {
	//	return
	//}
	// if (!userStore.$state.roles.includes('sj1')) {
	// 	return
	// }
	for (let item in form1) {
		form1[item] = row[item]
	}
	form1.moneyCost = Number(row.moneyCost)
	form1.moneyQuote = Number(row.moneyQuote)
	if (form1.fileAddressList) {
		filelist.value = form1.fileAddressList.map((e) => {
			return { name: e, url: e }
		})
		dowloadList.value = form1.fileAddressList
	} else {
		filelist.value = []
		dowloadList.value = []
	}

	open.value = true
}
const deleteRow = () => {
	proxy.$modal
		.confirm('是否确认此操作？')
		.then(() => {
			return delQuotation(detail.value.quotationId)
		})
		.then(() => {
			tagsView.delView(router.currentRoute.value)
			router.go(-1)
			proxy.$modal.msgSuccess('删除成功')
		})
		.catch(() => {})
}
const downloadFile = (file) => {
	download({ url: file }).then()
}
const baseform = ref()
const submitForm = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			if (form1.itemId) {
				updateQuotationItem(form1).then((res) => {
					proxy.$modal.msgSuccess('修改成功！')
					open.value = false
					getList()
				})
			} else {
				addQuotationItem(form1).then((res) => {
					proxy.$modal.msgSuccess('新增成功！')
					open.value = false
					getList()
				})
			}
		}
	})
}
// const baseformc = ref()
// const toCheckLogs = () => {
// 	router.push({
// 		path: '/log/logManage',
// 		query: { id: route.query.id, type: 3 }
// 	})
// }
// const submitAdd = () => {
// 	baseformc.value.validate((valid, e) => {
// 		if (valid) {
// 			updateQuotation(form).then((res) => {
// 				proxy.$modal.msgSuccess('审核成功！')
// 				openC.value = false
// 				detail.value.quotationStatus = form.quotationStatus
// 				form.quotationStatus = ''
// 				form.auditNote = ''
// 			})
// 		}
// 	})
// }
const submitDec = () => {
	updateQuotation({ recommend: detail.value.recommend, quotationId: detail.value.quotationId }).then((res) => {
		proxy.$modal.msgSuccess('保存成功！')
	})
}
const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>

<style lang="scss" scoped>
.info-url {
	display: block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
	background-color: #3f9efe;
	color: #ffffff;
	margin: 5px 0;
	padding-left: 10px;
	cursor: pointer;
}
.main {
	background-color: #ffffff;
	.header {
		font-size: 24px;
		color: black;
		font-weight: 600;
	}
	.content {
		.content-header {
			color: black;
			font-weight: 600;
			margin-bottom: 10px;
		}
		.info-url {
			display: inline-block;
			height: 40px;
			line-height: 40px;
			font-size: 18px;
			background-color: #3f9efe;
			color: #ffffff;
			margin: 10px 0;
			padding-left: 10px;
			padding-right: 10px;
			cursor: pointer;
		}
		.info {
			display: flex;
			flex-wrap: wrap;
			line-height: 40px;
			.item {
				width: 30%;
				font-size: 14px;
				display: flex;
				margin-bottom: 10px;
				.label {
					line-height: 30px;
					height: 30px;
					color: #325e8e;
					background-color: #f2f2f1;
					padding: 0 5px;
					width: 100px;
					text-align: center;
					margin-right: 5px;
					box-sizing: border-box;
				}
				span:last-child {
					line-height: 20px;
				}
			}
		}
	}

	.price-item {
		background-color: #f9f9f9;
		margin-top: 10px;
		width: 140px;
		height: 370px;
		border: 1px #dcdfe6 solid;
		padding: 5px;
		margin-right: 20px;
		line-height: 25px;
		background-color: #ffffff;
		text-align: center;
		cursor: pointer;
		.price-label {
			font-size: 14px;
		}
		.price-p {
			color: #3f9efe;
			margin-bottom: 5px;
		}
	}
}
</style>
